<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >考试管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>等级管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="level_manager_content">
        <!-- 按钮栏 -->
        <el-row>
          <el-col :span="24">
            <div class="level_manager_top">
              <el-button size="mini" type="primary" @click="addLevelFn()"
                >新增</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <div v-if="levelListData != undefined && levelListData.length > 0">
          <el-row>
            <el-col :span="24">
              <el-table
                :data="levelListData"
                border
                size="mini"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="等级名称"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="level"
                  label="等级"
                  width="80"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="created_at"
                  label="创建时间"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="updated_at"
                  label="更新时间"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="列表显示"
                  width="100"
                  itemprop=""
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-checkbox
                      size="mini"
                      :value="scope.row.is_show == '1' ? true : false"
                      @change="tableCheckChange($event, scope.row)"
                      >显示</el-checkbox
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="260"
                  itemprop=""
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="levelDetailFn(scope.$index, scope.row)"
                      >查看</el-button
                    >
                    <el-button
                      size="mini"
                      type="primary"
                      @click="editLevelFn(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="deleteLevelFn(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="level_manager_pagination">
                <el-pagination
                  @size-change="listSizeChange"
                  @current-change="listCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row v-else>
          <el-empty description="暂无数据"></el-empty>
        </el-row>
      </div>
    </el-row>
  </div>
</template>
<style src="../../assets/css/exam/levelManager.css" scoped></style>

<script>
export default {
  name: "LevelManager",
  components: {},
  data() {
    return {
      levelListData: [], // 等级列表
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      loadingKey: false,
      loadingText: "",
    };
  },
  created: function () {
    this.getListDataFn();
  },
  methods: {
    // 获取列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/admin/category/index";
      let data = {
        page: this.currentPage,
        perPage: this.pageSize,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.levelListData = response.category_list;
            that.total = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 新增
    addLevelFn: function () {
      this.$router.push({
        name: "LevelFrom",
        params: {
          key: 1,
        },
      });
    },
    // 修改
    editLevelFn: function (index, row) {
      this.$router.push({
        name: "LevelFrom",
        params: {
          id: row.id,
          key: 2,
        },
      });
    },
    // 查看
    levelDetailFn: function (index, row) {
      const routeUrl = this.$router.resolve({
        name: "LevelFrom",
      });
      let params = {
        id: row.id,
        key: 3,
      };
      this.$store.commit("set_levelManagerParams", params);
      window.open(routeUrl.href, "_blank");
    },
    // 删除
    deleteLevelFn: function (index, row) {
      let that = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        let url = "/admin/category/destroy";
        let data = {
          id: row.id,
        };
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("删除成功");
              let next = that.currentPage - 1;
              if (that.levelListData.length == 1) {
                that.currentPage = next >= 1 ? next : 1;
              }
              that.getListDataFn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 开启勾选切换
    tableCheckChange: function (val, row) {
      let that = this;
      let url = "/admin/category/changeShowStatus";
      let data = {
        id: row.id,
      };
      data.is_show = val ? 1 : 2;
      that.loadingText = "处理中...";
      that.loadingKey = true;
      that.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.$message.success("操作成功");
            that.getListDataFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
  },
};
</script>
